{% extends "base.html" %}

{% block title %}任务日志详情{% endblock %}

{% block styles %}
    <style>
        .thumbnail-container {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: 15px;
        }
        .thumbnail {
            width: 200px;
            height: 150px;
            object-fit: cover;
            cursor: pointer;
            border: 1px solid #ddd;
            border-radius: 4px;
            transition: transform 0.2s;
        }
        .thumbnail:hover {
            transform: scale(1.05);
        }
        .status-badge {
            font-size: 1rem;
            padding: 0.5em 0.75em;
        }
        .marker-timeline {
            display: flex;
            justify-content: space-between;
            margin: 20px 0;
        }
        .marker-point {
            position: relative;
            text-align: center;
            flex: 1;
        }
        .marker-dot {
            width: 36px;
            height: 36px;
            background-color: #bbb;
            border-radius: 50%;
            display: inline-block;
            margin-bottom: 5px;
        }
        .marker-dot.active {
            background-color: #007bff;
        }
        .marker-dot.cd {
            background-color: #28a745; /* 绿色 */
        }
        .marker-dot.regular {
            background-color: #007bff; /* 蓝色 */
        }
        .marker-line {
            position: absolute;
            top: 5px;
            left: 0;
            right: 0;
            height: 2px;
            background-color: #ddd;
            z-index: -1;
        }
    </style>
{% endblock %}

{% block content %}

    <div class="container mt-4">
        <h3 class="mb-4">任务日志详情</h3>
        
        <div class="card mb-4">
            <div class="card-header">
                <h5>基本信息</h5>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        <div class="mb-3">
                            <strong>日志ID:</strong> <span id="logId"></span>
                        </div>
                        <div class="mb-3">
                            <strong>任务ID:</strong> <span id="taskId"></span>
                        </div>
                        <div class="mb-3">
                            <strong>标记点:</strong> <span id="marker"></span>
                        </div>

                        <div class="mb-3">
                        <strong>状态:</strong> 
                        <span id="statusBadge" class="badge"></span>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="mb-3">
                            <strong>操作类型:</strong> <span id="action"></span>
                        </div>
                        <div class="mb-3">
                            <strong>开始时间:</strong> <span id="startTime"></span>
                        </div>
                        <div class="mb-3">
                            <strong>结束时间:</strong> <span id="endTime"></span>
                        </div>

                        <div class="mb-3">
                         <strong>描述:</strong> <span id="description" class="badge bg-success fs-6"></span>
                        </div>
                    </div>

   
                </div>
                <!--          
                       <div class="mb-3">
                    <strong>状态:</strong> 
                    <span id="statusBadge" class="badge"></span>
                </div>
                -->
          
            </div>
        </div>

        <div class="card mb-4">
            <div class="card-header">
                <h5>标记点路线</h5>
            </div>
            <div class="card-body">
                <div id="markerTimeline" class="marker-timeline">
                    <div class="marker-line"></div>
                </div>
            </div>
        </div>

    </div>
{% endblock %}

{% block scripts %}
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const logId = new URLSearchParams(window.location.search).get('log_id') || 
                          window.location.pathname.split('/').pop();
            
            fetch(`/api/task-logs/${logId}`)
                .then(response => response.json())
                .then(log => {
                    // Set basic info
                    document.getElementById('logId').textContent = log.log_id;
                    document.getElementById('taskId').textContent = log.task_id;
                    document.getElementById('description').textContent = log.description || '';

                    document.getElementById('marker').textContent = log.marker;
                    document.getElementById('action').textContent = 
                        log.action === 0 ? '拍照' : '录像';
                    document.getElementById('startTime').textContent = log.start_time;
                    document.getElementById('endTime').textContent = log.end_time;
                    
                    // Set status badge
                    const statusBadge = document.getElementById('statusBadge');
                    const statusText = {
                        1: '进行中',
                        2: '已完成', 
                        3: '部分完成',
                        4: '失败'
                    };
                    const statusClass = {
                        1: 'bg-warning',
                        2: 'bg-success',
                        3: 'bg-primary',
                        4: 'bg-danger'
                    };
                    statusBadge.textContent = statusText[log.status] || '未知';
                    statusBadge.className = `badge ${statusClass[log.status] || 'bg-secondary'}`;
                    
                    // Build marker timeline
                    const markers = log.marker.split(',');
                    const timeline = document.getElementById('markerTimeline');
                    
                    markers.forEach((marker, index) => {
                        const markerPoint = document.createElement('div');
                        markerPoint.className = 'marker-point';
                        
                        const markerDot = document.createElement('div');
                        markerDot.className = 'marker-dot';
                        
                        // 判断是否是最后一个点位(CD)
                        if(index === markers.length - 1) {
                            markerDot.classList.add('cd'); // CD点位绿色
                        } else {
                            markerDot.classList.add('regular'); // 其他点位蓝色
                        }
                        
                        // 保留第一个点位的active状态
                        if(index === 0) markerDot.classList.add('active');
                        
                        const markerLabel = document.createElement('div');
                        markerLabel.textContent = marker;
                        
                        markerPoint.appendChild(markerDot);
                        markerPoint.appendChild(markerLabel);
                        timeline.insertBefore(markerPoint, timeline.querySelector('.marker-line'));
                    });
                });
        });


    </script>
{% endblock %}
